import React, { Component } from 'react'

// 7. 导入 store 
// import store from './store/index'

import * as types from './store/types'

// connect 是用来连接 redux 和 react 的桥梁
import { connect } from 'react-redux'

class Page1 extends Component {
    render() {


        // const state = store.getState()
        // console.log(state);
        return (
            <div>

                <h1>Page1 ----- {this.props.count} </h1>

                <button onClick={this.props.add}>全局状态 加1</button>

                <button onClick={this.props.reduce}>全局状态 减1</button>

                <button onClick={() => {
                    this.props.addNum(18)
                }}>全局状态加指定数</button>

                <button onClick={() => {
                    this.props.reduceNum(6)
                }}>全局状态减指定数</button>

            </div>
        )
    }
}

// 将全局状态中的数据映射到当前组件的 props 属性中
const mapStateToProps = (state) => {
    return {
        count: state.app.count
    }
}

// 将修改全局状态的函数，映射到组件的 props 属性中
const mapDispatchToProps = (dispatch) => {
    return {
        add() {
            dispatch({ type: types.ADD })
        },
        reduce() {
            dispatch({ type: types.REDUCE })
        },
        addNum(val) {
            dispatch({ type: types.ADDNUM, payload: val })
        },
        reduceNum(val) {
            dispatch({ type: types.REDUCENUM, payload: val })
        }
    }
}

// connect 是用来连接状态组件和 react 的展示组件用的
// connect(将状态映射到props的方法, 将修改方法映射到props的方法)
// connect 的返回值是一个高阶组件
export default connect(mapStateToProps, mapDispatchToProps)(Page1)